<template>
  <div class="wrap">
    <h3>快捷入口</h3>
    <el-row>
      <el-col :span="5">
        <div @click="sportsReserve" style="cursor: pointer">
          <el-card class="box-card">
            <p class="title">场地预约</p>
          </el-card>
        </div>
      </el-col>
      <el-col :span="5" :offset="1">
        <div @click="sportsMemberList" style="cursor: pointer">
          <el-card class="box-card">
            <p class="title">会员管理</p>
          </el-card>
        </div>
      </el-col>
      <el-col :span="5" :offset="1">
        <div @click="sportsFieldItem" style="cursor: pointer">
          <el-card class="box-card">
            <p class="title">场地管理</p>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <h3>实时数据</h3>
    <el-row>
      <el-col :span="5" class="item">
        <el-card class="box-card">
          <div slot="header" class="clearfix header">
            <p>今日总收入</p>
          </div>
          <h3>￥{{ data.total }}</h3>
        </el-card>
      </el-col>
      <el-col :span="5" :offset="1" class="item">
        <el-card class="box-card" style="padding: 0">
          <div slot="header" class="clearfix header" style="padding: 0">
            <p>今日订场金额</p>
            <p>订场：{{ data.preNumber }}</p>
          </div>
          <h3>￥{{ data.preAmount }}</h3>
        </el-card>
      </el-col>
      <el-col :span="5" :offset="1" class="item">
        <el-card class="box-card">
          <div slot="header" class="clearfix header">
            <p>今日充值金额</p>
            <p>充值：{{ data.rechargeNumber }}</p>
          </div>
          <h3>￥{{ data.rechargeAmount }}</h3>
        </el-card>
      </el-col>
      <el-col :span="5" :offset="1" class="item">
        <el-card class="box-card">
          <div slot="header" class="clearfix header">
            <p>门票</p>
            <p>订单：{{ data.ticketNumber }}</p>
          </div>
          <h3>￥{{ data.ticketAmount }}</h3>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>  
<script>
import { getHomeData } from '@/config/api'
import { times, divide } from "@/utils/tools"

export default {
  data () {
    return {
      data: {}
    }
  },
  created () {
    this.getData()
  },
  methods: {
    sportsReserve () {
      this.$router.push('/sports/reserve')
    },
    sportsMemberList () {
      this.$router.push('/sports/member_list')
    },
    sportsFieldItem () {
      this.$router.push('/sports/field_item')
    },
    getData () {
      getHomeData({}).then(res => {
        res.data.result.preAmount = divide(res.data.result.preAmount, 100)
        res.data.result.rechargeAmount = divide(res.data.result.rechargeAmount, 100)
        res.data.result.shopAmount = divide(res.data.result.shopAmount, 100)
        res.data.result.subjectAmount = divide(res.data.result.subjectAmount, 100)
        res.data.result.ticketAmount = divide(res.data.result.ticketAmount, 100)
        res.data.result.total = divide(res.data.result.total, 100)
        this.data = res.data.result
      })
    }
  }
}
</script>
<style scoped lang="scss">
.wrap {
  padding: 20px;
}
.title {
  font-size: 24px;
  font-weight: bold;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  p {
    line-height: 30px;
  }
}
.box-card {
  h3 {
    font-size: 40px;
    line-height: 1;
    margin: 0;
  }
}
</style>